﻿@page "/menu-bar/data-binding"

@using Syncfusion.Blazor.Navigations

@inherits SampleBaseComponent

<SampleDescription>
    <p> This sample demonstrates data source binding of the Menu component. Mouse hover or clicking the menu item displays the sub menu pop-up items. </p>
</SampleDescription>
<ActionDescription>
    <p>The <code>Menu</code> component loads the data through the <b>Items</b> property, where the data can either be structured as hierarchical or self-referential data, i.e. mapped with Id and ParentId fields. </p>
    <p>In this demo, the component is bound with the list type data where the parent-child relation is referred by <b>Id</b> and <b>ParentId</b> mapping fields.</p>    
    <p>More information about Blazor Menu Bar component can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/menu-bar/data-source-binding-and-custom-menu-items/'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="menu-control">
        <SfMenu Items="@menuItems"></SfMenu>
    </div>
</div>

@code{
    private List<DataModel> menuItems = new List<DataModel>
    {
        new DataModel { Id = "parent1", Text = "Appliances" },
        new DataModel { Id = "parent2", Text = "Accessories" },
        new DataModel { Id = "parent3", Text = "Fashion" },
        new DataModel { Id = "parent4", Text = "Home & Living" },
        new DataModel { Id = "parent5", Text = "Entertainment" },
        new DataModel { Id = "parent6", Text = "Kitchen", ParentId = "parent1" },
        new DataModel { Id = "parent7", Text = "Washing Machine", ParentId = "parent1" },
        new DataModel { Id = "parent8", Text = "Air Conditioners", ParentId = "parent1" },
        new DataModel { Id = "parent9", Text = "Electric Cookers", ParentId = "parent6" },
        new DataModel { Id = "parent10", Text = "Coffee Makers", ParentId = "parent6" },
        new DataModel { Id = "parent11", Text = "Blenders", ParentId = "parent6" },
        new DataModel { Id = "parent12", Text = "Fully Automatic", ParentId = "parent7" },
        new DataModel { Id = "parent13", Text = "Semi Automatic", ParentId = "parent7" },
        new DataModel { Id = "parent14", Text = "Inverter ACs", ParentId = "parent8" },
        new DataModel { Id = "parent15", Text = "Split ACs", ParentId = "parent8" },
        new DataModel { Id = "parent16", Text = "Window ACs", ParentId = "parent8" },
        new DataModel { Id = "parent17", Text = "Mobile", ParentId = "parent2" },
        new DataModel { Id = "parent18", Text = "Computer", ParentId = "parent2" },
        new DataModel { Id = "parent19", Text = "Headphones", ParentId = "parent17" },
        new DataModel { Id = "parent20", Text = "Memory Cards", ParentId = "parent17" },
        new DataModel { Id = "parent21", Text = "Power Banks", ParentId = "parent17" },
        new DataModel { Id = "parent22", Text = "Pendrives", ParentId = "parent18" },
        new DataModel { Id = "parent23", Text = "External Hard Disks", ParentId = "parent18" },
        new DataModel { Id = "parent24", Text = "Monitors", ParentId = "parent18" },
        new DataModel { Id = "parent25", Text = "Men", ParentId = "parent3" },
        new DataModel { Id = "parent26", Text = "Women", ParentId = "parent3" },
        new DataModel { Id = "parent27", Text = "Shirts", ParentId = "parent25" },
        new DataModel { Id = "parent28", Text = "Jackets", ParentId = "parent25" },
        new DataModel { Id = "parent29", Text = "Track Suits", ParentId = "parent25" },
        new DataModel { Id = "parent30", Text = "Kurtas", ParentId = "parent26" },
        new DataModel { Id = "parent31", Text = "Salwars", ParentId = "parent26" },
        new DataModel { Id = "parent32", Text = "Sarees", ParentId = "parent26" },
        new DataModel { Id = "parent33", Text = "Furniture", ParentId = "parent4" },
        new DataModel { Id = "parent34", Text = "Decor", ParentId = "parent4" },
        new DataModel { Id = "parent35", Text = "Beds", ParentId = "parent33" },
        new DataModel { Id = "parent36", Text = "Mattresses", ParentId = "parent33" },
        new DataModel { Id = "parent37", Text = "Dining Tables", ParentId = "parent33" },
        new DataModel { Id = "parent38", Text = "Clocks", ParentId = "parent34" },
        new DataModel { Id = "parent39", Text = "Wall Decals", ParentId = "parent34" },
        new DataModel { Id = "parent40", Text = "Paintings", ParentId = "parent34" },
        new DataModel { Id = "parent41", Text = "Televisions", ParentId = "parent5" },
        new DataModel { Id = "parent42", Text = "Home Theatres", ParentId = "parent5" },
        new DataModel { Id = "parent43", Text= "Gaming Laptops", ParentId = "parent5" }
    };

    private class DataModel
    {
        public string Text { get; set; }
        public string Id { get; set; }
        public string ParentId { get; set; }
    }
}

<style>
    .e-menu-wrapper {
        text-align: center;
    }

    .menu-control {
        margin-top: 45px;
        text-align: center;
    }
</style>